﻿@using Abp.Json
@using Partner.Surround.Web.Models.Editions
@model EditionFormViewModel
@section styles{
    <link href="~/css/treetable.css" rel="stylesheet" />
    <link href="~/lib/layui-extend-modules/ztree/metroStyle/metroStyle.css" rel="stylesheet" />
    <style type="text/css">
        body {
            background-color: #fafafa !important;
        }

        .layui-tab {
            margin-top: 0px;
        }
    </style>
}

<div class="layui-fluid">
    <div class="layui-tab layui-tab-brief" lay-filter="editionForm">
        <ul class="layui-tab-title">
            <li class="layui-this">版本</li>
            <li>功能</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form class="layui-form" lay-filter="layui-form-edition" style="padding: 15px 0 0 0;">
                    <input type="hidden" name="id" />
                    <div class="layui-form-item">
                        <label class="layui-form-label">版本名称</label>
                        <div class="layui-input-block">
                            <input name="displayName" class="layui-input" type="text" placeholder="请输入版本名称" autocomplete="off" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-hide" lay-submit lay-filter="LAY-edition-front-submit" id="LAY-edition-front-submit">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <ul id="tree" class="ztree" style="height: 300px; padding: 0px; border: 1px solid #ddd; overflow: auto;"></ul>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script type="text/javascript">
        layui.config({
            base: '/lib/layui-extend-modules/' //静态资源所在路径
        }).extend({
            ztree: 'ztree/ztree'
        }).use(['jquery', 'form','ztree','element'], function () {
            var $ = layui.$,
                form = layui.form,
                ztree = layui.ztree,
                element = layui.element;

            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            parent.layer.iframeAuto(index);

            //初始化表单
            form.val("layui-form-edition",@Html.Raw(JsonExtensions.ToJsonString(Model.Edition,true,false)));
            form.render();

            //左边树状机构列表
            var zTree = function () {
                var setting = {
                    view: { selectedMulti: false },
                    check: {
                        enable: true,//显示复选框
                        chkStyle: "checkbox"
                    },
                    data: {
                        key: {
                            name: 'displayName',
                            title: 'displayName'
                        },
                        simpleData: {
                            enable: true,
                            idKey: 'name',
                            pIdKey: 'parentName',
                            rootPId: 'null'
                        }
                    }
                };
                var zTreeObj;
                var load = function (treeJson) {
                    zTreeObj = $.fn.zTree.init($("#tree"), setting);
                    zTreeObj.addNodes(null, treeJson);
                };

                return {
                    reload: load
                };
            }();

            //初始化功能树
            zTree.reload(@Html.Raw(JsonExtensions.ToJsonString(Model.Features, true, false)));

            //Tab切换
            element.on('tab(editionForm)', function (data) {
                parent.layer.iframeAuto(index);
            });

            //触发表单提交
            layui.submitForm = function(){
                $("#LAY-edition-front-submit").click();
            }

            //获取选中的功能节点
            function getFeaturess() {
                var treeObj = $.fn.zTree.getZTreeObj("tree");
                var currSelectedNode = treeObj.getCheckedNodes(true);
                var names = currSelectedNode.map(function (d) { return { "name":d.name,"value":d.checked } });
                return names;
            }

            //表单提交
            form.on('submit(LAY-edition-front-submit)', function (data) {
                var field = {
                    edition: data.field, //获取提交的字段
                    featureValues: getFeaturess()
                };

                var waitIndex = parent.layer.load(2);
                abp.ajax({
                    url: "@Url.Action("CreateOrUpdateEdition", "Editions")",
                    data: JSON.stringify(field),
                    abpHandleError: false
                }).done(function (data) {
                    if (data.code == 200) {
                        data.index = index;
                        parent.layui.currWindow().layui.callback(data);
                    }
                }).fail(function (jqXHR) {
                    parent.layer.msg(jqXHR.message, { icon: 5 });
                }).always(function () {
                    parent.layer.close(waitIndex);
                });

                return false;
            });
        });
    </script>
}
